<script setup lang="ts">
import { onMounted, computed, watch } from 'vue';
import Header from './components/Header.vue';
import Nav from './components/Nav.vue';
import { useMenuStore } from './stores/menusStore';
import { useRouter } from 'vue-router';

let tabData: any = null
let windowId: number | null = null

const menuStore = useMenuStore();
const router = useRouter();

const curentTab = computed(() => {
  return menuStore.menuList.find((item) => item.id == menuStore.activeMenuId);
})

watch(curentTab, (newVal: any) => {
  router.push({ name: newVal.route});
})

onMounted(() => {
  const params = new URLSearchParams(window.location.search)
  
  const tabStr = params.get('tab')
  const winIdStr = params.get('windowId')

  if (winIdStr) {
    windowId = Number(winIdStr) // 本地变量赋值
    menuStore.windowId = windowId // 也存到 pinia
    console.log('接收到 windowId 参数', windowId)
  }

  if (tabStr) {
    try {
      tabData = JSON.parse(decodeURIComponent(tabStr))
      menuStore.handleMenuClick(tabData.id);
      console.log('接收到 tab 参数', tabData)
    } catch (e) {
      console.error('解析 tab 参数失败', e)
    }
  } else {
    // 初始化默认打开一个窗口
    menuStore.handleMenuClick(menuStore.menuList[0].id)
  }
})

</script>

<template>
  <div class="contanner">
    <div class="nav_container">
      <Nav></Nav>
    </div>
    <div class="main_container">
      <Header></Header>
      <div class="main_content_container">
        <div style="font-size: 55px; color: skyblue; padding: 30px;">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.contanner {
  height: 100vh;
  width: 100vw;
  display: flex;
}
.nav_container {
  flex: 0 0 150px;
}
.main_container {
  height: 100%;
  flex: 1;
}
</style>
<style>
* {
  padding: 0;
  margin: 0;
}
</style>
